<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现的常用图标</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/oval.css">
  <link rel="stylesheet" href="css/arrow-up.css">
  <link rel="stylesheet" href="css/arrow-down.css">
  <link rel="stylesheet" href="css/arrow-left.css">
  <link rel="stylesheet" href="css/arrow-right.css">
  <link rel="stylesheet" href="css/arrow-left-top.css">
  <link rel="stylesheet" href="css/arrow-left-bottom.css">
  <link rel="stylesheet" href="css/arrow-right-top.css">
  <link rel="stylesheet" href="css/arrow-right-bottom.css">
  <link rel="stylesheet" href="css/curve-arrow.css">
  <link rel="stylesheet" href="css/parallelogram.css">
  <link rel="stylesheet" href="css/trapezoid.css">
  <link rel="stylesheet" href="css/pentagon.css">
  <link rel="stylesheet" href="css/hexagon.css">
  <link rel="stylesheet" href="css/heart.css">
  <link rel="stylesheet" href="css/infinite.css">
  <link rel="stylesheet" href="css/diamond.css">
  <link rel="stylesheet" href="css/lock.css">
  <link rel="stylesheet" href="css/bean.css">
  <link rel="stylesheet" href="css/chat.css">
  <link rel="stylesheet" href="css/taiji.css">
  <link rel="stylesheet" href="css/indicator.css">
</head>

<body>

  <div class="title">
    <h2>CSS实现的常用图标</h2>
  </div>

  <ol>
    <li>
      <h4>椭圆</h4>
      <div class="oval"></div>
    </li>
    <li>
      <h4>上三角</h4>
      <div class="arrow-up"></div>
    </li>
    <li>
      <h4>下三角</h4>
      <div class="arrow-down"></div>
    </li>
    <li>
      <h4>左三角</h4>
      <div class="arrow-left"></div>
    </li>
    <li>
      <h4>右三角</h4>
      <div class="arrow-right"></div>
    </li>
    <li>
      <h4>左上角</h4>
      <div class="arrow-left-top"></div>
    </li>
    <li>
      <h4>左下角</h4>
      <div class="arrow-left-bottom"></div>
    </li>
    <li>
      <h4>右上角</h4>
      <div class="arrow-right-top"></div>
    </li>
    <li>
      <h4>右下角</h4>
      <div class="arrow-right-bottom"></div>
    </li>
    <li>
      <h4>弯曲箭头</h4>
      <div class="curve-arrow"></div>
    </li>
    <li>
      <h4>平行四边形</h4>
      <div class="parallelogram"></div>
    </li>
    <li>
      <h4>梯形</h4>
      <div class="trapezoid"></div>
    </li>
    <li>
      <h4>五边形</h4>
      <div class="pentagon"></div>
    </li>
    <li>
      <h4>六边形</h4>
      <div class="hexagon"></div>
    </li>
    <li>
      <h4>心形</h4>
      <div class="heart"></div>
    </li>
    <li>
      <h4>无穷大</h4>
      <div class="infinite"></div>
    </li>
    <li>
      <h4>钻石</h4>
      <div class="diamond"></div>
    </li>
    <li>
      <h4>锁</h4>
      <div class="lock"></div>
    </li>
    <li>
      <h4>吃豆人</h4>
      <div class="bean"></div>
    </li>
    <li>
      <h4>对话泡泡</h4>
      <div class="chat"></div>
    </li>
    <li>
      <h4>太极</h4>
      <div class="taiji"></div>
    </li>
    <li>
      <h4>丝带徽章</h4>
    </li>
    <li>
      <h4>雪佛兰车标</h4>
    </li>
    <li>
      <h4>放大镜</h4>
    </li>
    <li>
      <h4>Facebook图标</h4>
    </li>
    <li>
      <h4>月亮</h4>
    </li>
    <li>
      <h4>扇形</h4>
    </li>
    <li>
      <h4>指示器</h4>
      <div class="indicator index2"></div>
      <div class="indicator index1"></div>
    </li>
  </ol>

</body>

</html>